React useFormState: تسلط بر مدیریت فرم برای بهینه‌سازی تجربه‌های کاربری

فرم‌ها بخش اساسی برنامه‌های وب هستند که به کاربران امکان تعامل با برنامه و ارسال داده را می‌دهند. با این حال، مدیریت وضعیت فرم، اعتبارسنجی و ارائه بازخورد می‌تواند پیچیده شود، به خصوص در برنامه‌های بزرگ و پویا. هوک useFormState که در React 18 معرفی شد، روشی قدرتمند و کارآمد برای مدیریت وضعیت فرم و ساده‌سازی منطق مدیریت آن ارائه می‌دهد که منجر به بهبود عملکرد و تجربه کاربری بهتر می‌شود. این راهنمای جامع، هوک useFormState را به طور عمیق بررسی می‌کند و مفاهیم اصلی، مزایا، مثال‌های عملی و تکنیک‌های پیشرفته آن را پوشش می‌دهد.

هوک useFormState در React چیست؟

useFormState یک هوک ری‌اکت است که مدیریت وضعیت فرم را با کپسوله کردن منطق وضعیت و به‌روزرسانی در یک هوک واحد ساده می‌کند. این هوک به طور خاص برای کار با کامپوننت‌های سرور ری‌اکت (React Server Components) و اکشن‌های سرور (Server Actions) طراحی شده است که با انتقال پردازش فرم به سرور، امکان بهبود تدریجی (progressive enhancement) و عملکرد بهتر را فراهم می‌کند.

ویژگی‌ها و مزایای کلیدی:

• مدیریت وضعیت ساده شده: منطق وضعیت فرم و به‌روزرسانی را متمرکز می‌کند، کدهای تکراری را کاهش داده و خوانایی کد را بهبود می‌بخشد.
• ادغام با اکشن‌های سرور: به صورت یکپارچه با اکشن‌های سرور ری‌اکت ادغام می‌شود و به شما امکان می‌دهد تا ارسال فرم و اعتبارسنجی را در سرور انجام دهید.
• بهبود تدریجی: با اجازه دادن به فرم‌ها برای کار کردن حتی بدون جاوا اسکریپت، بهبود تدریجی را امکان‌پذیر می‌سازد و با فعال بودن جاوا اسکریپت، قابلیت‌های پیشرفته‌تری ارائه می‌دهد.
• عملکرد بهینه‌سازی شده: با انجام منطق فرم در سرور، پردازش سمت کلاینت را کاهش می‌دهد که منجر به ارسال سریع‌تر فرم و بهبود عملکرد برنامه می‌شود.
• دسترسی‌پذیری: با فراهم کردن مکانیزم‌هایی برای مدیریت خطاها و ارائه بازخورد به کاربران دارای معلولیت، ایجاد فرم‌های دسترس‌پذیر را تسهیل می‌کند.

درک هوک useFormState

هوک useFormState دو آرگومان دریافت می‌کند:

1. اکشن سرور (The Server Action): تابعی که هنگام ارسال فرم اجرا می‌شود. این تابع معمولاً اعتبارسنجی فرم، پردازش داده‌ها و به‌روزرسانی پایگاه داده را انجام می‌دهد.
2. وضعیت اولیه (The Initial State): مقدار اولیه وضعیت فرم. این می‌تواند هر مقدار جاوا اسکریپتی مانند یک شیء، آرایه یا مقدار اولیه (primitive) باشد.

این هوک یک آرایه شامل دو مقدار را برمی‌گرداند:

1. وضعیت فرم (The Form State): مقدار فعلی وضعیت فرم.
2. اکشن فرم (The Form Action): تابعی که به پراپ action عنصر form پاس می‌دهید. این تابع با ارسال فرم، اکشن سرور را فعال می‌کند.

مثال پایه:

بیایید یک مثال ساده از یک فرم تماس را در نظر بگیریم که به کاربران اجازه می‌دهد نام و آدرس ایمیل خود را ارسال کنند.

            // Server Action (example - needs to be defined elsewhere)
async function submitContactForm(prevState, formData) {
  // Validate form data
  const name = formData.get('name');
  const email = formData.get('email');

  if (!name || !email) {
    return { message: 'Please fill in all fields.' };
  }

  // Process form data (e.g., send an email)
  try {
    // Simulate sending an email
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate async operation
    return { message: 'Thank you for your submission!' };
  } catch (error) {
    return { message: 'An error occurred. Please try again later.' };
  }
}

// React Component
'use client'; // Important for Server Actions

import { useFormState } from 'react-dom';

function ContactForm() {
  const [state, formAction] = useFormState(submitContactForm, { message: null });

  return (
    

      Name:
      



      Email:
      



      Submit

      {state?.message && 
{state.message}
}
    
  );
}

export default ContactForm;

            

              
                Copy
              
            
          

در این مثال، تابع submitContactForm یک اکشن سرور است. این تابع وضعیت قبلی و داده‌های فرم را به عنوان آرگومان دریافت می‌کند. داده‌های فرم را اعتبارسنجی کرده و در صورت معتبر بودن، داده‌ها را پردازش کرده و یک شیء وضعیت جدید با پیام موفقیت برمی‌گرداند. اگر خطایی وجود داشته باشد، یک شیء وضعیت جدید با پیام خطا برمی‌گرداند. هوک useFormState وضعیت فرم را مدیریت کرده و تابع formAction را فراهم می‌کند که به پراپ action عنصر form پاس داده می‌شود. هنگامی که فرم ارسال می‌شود، تابع submitContactForm در سرور اجرا شده و وضعیت حاصل در کامپوننت به‌روزرسانی می‌شود.

تکنیک‌های پیشرفته useFormState

۱. اعتبارسنجی فرم:

اعتبارسنجی فرم برای اطمینان از یکپارچگی داده‌ها و ارائه تجربه کاربری خوب حیاتی است. useFormState می‌تواند برای مدیریت منطق اعتبارسنجی فرم در سرور استفاده شود. در اینجا یک مثال آورده شده است:

            async function validateForm(prevState, formData) {
  const name = formData.get('name');
  const email = formData.get('email');

  let errors = {};

  if (!name) {
    errors.name = 'Name is required.';
  }

  if (!email) {
    errors.email = 'Email is required.';
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    errors.email = 'Invalid email format.';
  }

  if (Object.keys(errors).length > 0) {
    return { errors: errors };
  }

  // Process the form data (e.g., save to database)
  return { message: 'Form submitted successfully!', errors: null };
}

function MyForm() {
  const [state, action] = useFormState(validateForm, { message: null, errors: null });

  return (
    

      Name:
      

      {state?.errors?.name && 
{state.errors.name}
}

      Email:
      

      {state?.errors?.email && 
{state.errors.email}
}

      Submit
      {state?.message && 
{state.message}
}
    
  );
}

            

              
                Copy
              
            
          

در این مثال، اکشن سرور validateForm داده‌های فرم را اعتبارسنجی کرده و یک شیء حاوی هرگونه خطای اعتبارسنجی را برمی‌گرداند. سپس کامپوننت این خطاها را به کاربر نمایش می‌دهد.

۲. به‌روزرسانی‌های خوش‌بینانه (Optimistic Updates):

به‌روزرسانی‌های خوش‌بینانه می‌توانند با ارائه بازخورد فوری، حتی قبل از اینکه سرور ارسال فرم را پردازش کند، تجربه کاربری را بهبود بخشند. با useFormState و کمی منطق سمت کلاینت، می‌توانید با به‌روزرسانی فوری وضعیت فرم پس از ارسال و بازگرداندن آن در صورت بروز خطا از سمت سرور، به‌روزرسانی‌های خوش‌بینانه را پیاده‌سازی کنید.

            'use client'

import { useFormState } from 'react-dom';
import { useState } from 'react';

async function submitForm(prevState, formData) {
  await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate network latency

  const value = formData.get('value');
  if (value === 'error') {
    return { message: 'Submission failed!' };
  }
  return { message: 'Submission successful!' };
}

function OptimisticForm() {
  const [optimisticValue, setOptimisticValue] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [state, action] = useFormState(submitForm, { message: '' });

  const handleSubmit = async (e) => {
    setIsSubmitting(true);
    setOptimisticValue(e.target.value.value);
    const formData = new FormData(e.target);
    const result = await action(prevState, formData);
    setIsSubmitting(false);

    if (result?.message === 'Submission failed!') {
      setOptimisticValue(''); // Revert on error
    }
  };

  return (
    

      Value:
      


      Submit
      {state?.message && 
{state.message}
}
    
  );
}

            

              
                Copy
              
            
          

در این مثال، ما در حال شبیه‌سازی یک پاسخ با تأخیر از سرور هستیم. قبل از اینکه اکشن سرور کامل شود، فیلد ورودی به صورت خوش‌بینانه با مقدار ارسال شده به‌روز می‌شود. اگر اکشن سرور با شکست مواجه شود (که با ارسال مقدار 'error' شبیه‌سازی شده است)، فیلد ورودی به حالت قبلی خود بازگردانده می‌شود.

۳. مدیریت آپلود فایل‌ها:

از useFormState می‌توان برای مدیریت آپلود فایل‌ها نیز استفاده کرد. شیء FormData به طور خودکار داده‌های فایل را مدیریت می‌کند. در اینجا یک مثال آورده شده است:

            async function uploadFile(prevState, formData) {
  const file = formData.get('file');

  if (!file) {
    return { message: 'Please select a file.' };
  }

  // Simulate uploading the file
  await new Promise(resolve => setTimeout(resolve, 1000));

  // You would typically upload the file to a server here
  console.log('File uploaded:', file.name);

  return { message: `File ${file.name} uploaded successfully!` };
}

function FileUploadForm() {
  const [state, action] = useFormState(uploadFile, { message: null });

  return (
    

      Select a file:
      



      Upload

      {state?.message && 
{state.message}
}
    
  );
}

            

              
                Copy
              
            
          

در این مثال، اکشن سرور uploadFile فایل را از شیء FormData دریافت کرده و آن را پردازش می‌کند. در یک برنامه واقعی، شما معمولاً فایل را به یک سرویس ذخیره‌سازی ابری مانند Amazon S3 یا Google Cloud Storage آپلود می‌کنید.

۴. بهبود تدریجی (Progressive Enhancement):

یکی از مزایای قابل توجه useFormState و اکشن‌های سرور، قابلیت ارائه بهبود تدریجی است. این بدان معناست که فرم‌های شما حتی اگر جاوا اسکریپت در مرورگر کاربر غیرفعال باشد، همچنان کار می‌کنند. فرم مستقیماً به سرور ارسال می‌شود و اکشن سرور ارسال فرم را مدیریت می‌کند. هنگامی که جاوا اسکریپت فعال باشد، ری‌اکت فرم را با تعامل و اعتبارسنجی سمت کلاینت بهبود می‌بخشد.

برای اطمینان از بهبود تدریجی، باید مطمئن شوید که اکشن‌های سرور شما تمام منطق اعتبارسنجی فرم و پردازش داده‌ها را مدیریت می‌کنند. همچنین می‌توانید مکانیزم‌های جایگزین برای کاربرانی که جاوا اسکریپت ندارند فراهم کنید.

۵. ملاحظات دسترسی‌پذیری:

هنگام ساخت فرم‌ها، توجه به دسترسی‌پذیری برای اطمینان از اینکه کاربران دارای معلولیت می‌توانند به طور مؤثر از فرم‌های شما استفاده کنند، مهم است. useFormState می‌تواند با فراهم کردن مکانیزم‌هایی برای مدیریت خطاها و ارائه بازخورد به کاربران، به شما در ایجاد فرم‌های دسترس‌پذیر کمک کند. در اینجا برخی از بهترین شیوه‌های دسترسی‌پذیری آورده شده است:

• استفاده از HTML معنایی (Semantic HTML): از عناصر HTML معنایی مانند <label>، <input> و <button> برای ایجاد ساختار و معنا برای فرم‌های خود استفاده کنید.
• ارائه برچسب‌های واضح: اطمینان حاصل کنید که تمام فیلدهای فرم دارای برچسب‌های واضح و توصیفی هستند که با استفاده از ویژگی for به عناصر ورودی مربوطه متصل شده‌اند.
• مدیریت خطاها به شیوه‌ای مناسب: خطاهای اعتبارسنجی را به صورت واضح و مختصر نمایش دهید و از ویژگی‌های ARIA برای آگاه کردن کاربران صفحه‌خوان از وجود خطاها استفاده کنید.
• فراهم کردن ناوبری با صفحه‌کلید: اطمینان حاصل کنید که کاربران می‌توانند با استفاده از صفحه‌کلید در فرم حرکت کنند.
• استفاده از ویژگی‌های ARIA: از ویژگی‌های ARIA برای ارائه اطلاعات اضافی به فناوری‌های کمکی، مانند صفحه‌خوان‌ها، استفاده کنید.

بهترین شیوه‌ها برای استفاده از useFormState

برای بهره‌برداری حداکثری از هوک useFormState، بهترین شیوه‌های زیر را در نظر بگیرید:

• اکشن‌های سرور را کوچک و متمرکز نگه دارید: اکشن‌های سرور باید مسئول یک کار واحد باشند، مانند اعتبارسنجی داده‌های فرم یا به‌روزرسانی پایگاه داده. این کار باعث می‌شود کد شما قابل فهم‌تر و نگهداری آن آسان‌تر باشد.
• مدیریت خطاها به شیوه‌ای مناسب: مدیریت خطای قوی را در اکشن‌های سرور خود پیاده‌سازی کنید تا از خطاهای غیرمنتظره جلوگیری کرده و پیام‌های خطای آموزنده به کاربر ارائه دهید.
• استفاده از یک کتابخانه اعتبارسنجی: استفاده از کتابخانه‌های اعتبارسنجی مانند Zod یا Yup را برای ساده‌سازی منطق اعتبارسنجی فرم در نظر بگیرید.
• ارائه بازخورد واضح به کاربر: بازخورد واضح و به موقع به کاربر در مورد وضعیت ارسال فرم، از جمله خطاهای اعتبارسنجی، پیام‌های موفقیت و نشانگرهای بارگذاری، ارائه دهید.
• بهینه‌سازی عملکرد: مقدار داده‌ای که بین کلاینت و سرور منتقل می‌شود را به حداقل برسانید تا عملکرد بهبود یابد.

مثال‌های واقعی و موارد استفاده

از useFormState می‌توان در طیف گسترده‌ای از برنامه‌های کاربردی واقعی استفاده کرد. در اینجا چند نمونه آورده شده است:

• فرم‌های تسویه حساب فروشگاه‌های اینترنتی: مدیریت اطلاعات پرداخت، آدرس‌های ارسال و خلاصه‌های سفارش.
• فرم‌های ثبت‌نام و ورود کاربران: احراز هویت کاربران و ایجاد حساب‌های جدید.
• فرم‌های تماس: جمع‌آوری سوالات و بازخوردهای کاربران.
• فرم‌های ورود داده: ثبت و مدیریت داده‌ها در برنامه‌های مختلف.
• نظرسنجی‌ها و آزمون‌ها: جمع‌آوری پاسخ‌های کاربران و ارائه بازخورد.

به عنوان مثال، یک فرم تسویه حساب فروشگاه اینترنتی را در نظر بگیرید. با استفاده از useFormState، می‌توانید اعتبارسنجی آدرس‌های ارسال، اطلاعات پرداخت و سایر جزئیات سفارش را در سرور انجام دهید. این کار تضمین می‌کند که داده‌ها قبل از ارسال به پایگاه داده معتبر هستند و همچنین با کاهش پردازش سمت کلاینت، عملکرد را بهبود می‌بخشد.

مثال دیگر، فرم ثبت‌نام کاربر است. با استفاده از useFormState، می‌توانید اعتبارسنجی نام‌های کاربری، رمزهای عبور و آدرس‌های ایمیل را در سرور انجام دهید. این کار تضمین می‌کند که داده‌ها امن هستند و کاربر به درستی احراز هویت می‌شود.

نتیجه‌گیری

هوک useFormState در React روشی قدرتمند و کارآمد برای مدیریت وضعیت فرم و ساده‌سازی منطق مدیریت آن فراهم می‌کند. با بهره‌گیری از اکشن‌های سرور و بهبود تدریجی، useFormState به شما امکان می‌دهد تا فرم‌های قوی، با عملکرد بالا و دسترس‌پذیر بسازید که تجربه کاربری عالی ارائه می‌دهند. با پیروی از بهترین شیوه‌های ذکر شده در این راهنما، می‌توانید به طور مؤثر از useFormState برای ساده‌سازی منطق مدیریت فرم خود و ساخت برنامه‌های ری‌اکت بهتر استفاده کنید. به یاد داشته باشید که هنگام طراحی فرم‌ها برای مخاطبان متنوع و بین‌المللی، استانداردهای جهانی دسترسی‌پذیری و انتظارات کاربران را در نظر بگیرید.